<template>
	<view class="content">
		<Search :keywords="keywords" @searchEvent="searchAction"/>
		<view class="list">
			<view class="list-ul">
				<Item v-for="item in list" :key="item.topic_id" :item="item" />
			</view>
			<view class="loading-tips">{{isLoading ? '数据加载中...' : (loadOver ? '没有更多数据' : '滑动加载更多数据')}}</view>
		</view>
	</view>
</template>

<script>
	import config from '../../src/config/api.config.js';
	import utils from '../../src/utils/utils.js';
	import userCheck from '../../src/utils/user.js';
	import request from '../../src/utils/request.js';
	import Search from '../index/search.vue';
	import Item from '../index/item.vue';
	export default {
		data() {
			return {
				page: 1, // 页码
				parentOpenid:'',//进入页面获取是否链接带有其他人的openid
				openid:'',
				isLoading: false, // 是否加载中
				loadOver: false, // 是否加载完成
				list: [],
				keywords: '',
				timer: null
			}
		},
		onLoad(options) {
			const that = this;
			this.keywords = options.keywords || '';
			this.parentOpenid = options.parentOpenid != undefined ?options.parentOpenid:'';
			
			/**
			 * 统一处理页面获取用户openid操作
			 * @param {Object} openid
			 */
			userCheck.checkSession(function(openid){
				that.openid = openid
				/**
				 * 处理本页面的逻辑
				 */
				that.timer = setTimeout(() => {
					that.getData();
				}, 500)
			},that.parentOpenid)
			
		},
		onUnload() {
			this.timer && clearTimeout(this.timer);
		},
		onReachBottom(r) {
			if(this.loadOver || this.isLoading) return;
			this.page ++;
			this.getData();
		},
		methods: {
			async getData() {
				this.isLoading = true;
				const r = await request({
					url: `${config.API}api/topic/search`,
					data: {
						page: this.page,
						keyword: this.keywords
					}
				});
				this.isLoading = false;
				if(r.error_code === 0) {
					this.list = [...this.list, ...r.data.data];
					if(r.data.current_page >= r.data.last_page) {
						this.loadOver = true;
					}
				}
			},
			searchAction(keywords) {
				this.keywords = keywords;
				this.resetAction();
				this.getData();
			},
			resetAction() {
				this.page = 1;
				this.list = [];
				this.isLoading = false;
				this.loadOver = false;
			}
		},
		components: {
			Item,
			Search
		},
		onShareAppMessage(r) {
			let _path = '/pages/index/index?parentOpenid='+this.openid;
			console.log(_path) 
			return {
				title: "心理测试、趣味测试",
				path: _path, //带上当前用户的openid，分销绑定关系
			}
		}
	}
</script>

<style lang="scss" scoped>
	$black: #000;
	$white: #fff;
	$color9: #999;
	.list {
		margin: 0 30rpx;
		.list-title {
			padding: 20rpx 0 24rpx 0;
			text {
				font-size: 44rpx;
				color: $black;
			}
		}
	}
	.loading-tips {
		font-size: 28rpx;
		color: $color9;
		padding: 20rpx 0;
		text-align: center;
		margin-bottom: 20rpx;
	}
</style>
